<%@ page import="com.edu.dreams.entity.User"%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	User user = (User) request.getSession().getAttribute("user");
%>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>童话世界</title>
<meta name="description" content="一个充满童话世界的地方，带你回味童年." />
<meta name="keywords" content="童话、英雄和魔法" />
<link rel="shortcut icon" href="images/favicon.ico" />
<!-- 引入bootstrap 样式文件 -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- 引入我们自己的样式文件 -->
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="css/animation.css">
<link rel="stylesheet" href="css/main-css.css">
<!-- 先引入jquery js文件 -->
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/superVideo.js"></script>
<!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>

<body>

	<!-- 导航栏 -->
	<nav class="navbar navbar-default">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
					aria-expanded="false">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand"
					href="${pageContext.request.contextPath}/home"><img
					style="margin-left: 15px;" src="images/logo.jpg" alt="童话世界"></a>
			</div>

			<div class="collapse navbar-collapse"
				id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li><a href="${pageContext.request.contextPath}/home">首页 <span
							class="sr-only">(current)</span></a></li>
					<li class="active"><a
						href="${pageContext.request.contextPath}/animations">动画</a></li>
					<li><a href="${pageContext.request.contextPath}/news">资讯</a></li>
					<li><a href="${pageContext.request.contextPath}/rank">排行榜</a></li>
					<li><a href="${pageContext.request.contextPath}/personal">个人中心</a></li>
				</ul>
				<form action="${pageContext.request.contextPath}/searchAnim"
					method="post" class="navbar-form navbar-left">
					<div class="form-group">
						<input type="text" name="animname" class="form-control"
							placeholder="搜索动画">
					</div>
					<button type="submit" class="btn btn-default">搜索</button>
				</form>
				<ul class="nav navbar-nav navbar-right">
					<li><a href="${pageContext.request.contextPath}/personal"><%=user.getUser_name()%> </a></li>
					<li><a href="${pageContext.request.contextPath}/logout">退出登录</a></li>
				</ul>
			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container-fluid -->
	</nav>

	<div class="container">
		<div class="row">
			<img class="img-responsive"
				src="${pageContext.request.contextPath}/upload/${animdata.anim_picurl}"
				alt="${animdata.anim_name}">
		</div>
	</div>

	<!--主体内容-->
	<h1 style="text-align: center; margin: 40px 0px;">${animdata.anim_name}</h1>
	 <div class="container">
        <div class="row col-md-offset-2">
            <!-- 设置视频插件容器 -->
            <div id="videoContainer"></div>
        </div>
    </div>

	<h1 style="text-align: center; margin: 40px 0px;">作品介绍</h1>
	<div class="container">
		<div class="row">
			<div class="col-md-4 col-xs-12">
				<a
					href="${pageContext.request.contextPath}/animationshow?id=${animdata.anim_id}">
					<img class="img-responsive"
					src="${pageContext.request.contextPath}/upload/${animdata.anim_picurl}"
					alt="${animdata.anim_name}">
				</a>
			</div>
			<div class="col-md-8 col-xs-12">
				<p style="margin-top: 40px;">${animdata.anim_jieshao}</p>
			</div>
		</div>
	</div>

	<h1 style="text-align: center; margin: 40px 0px;">角色介绍</h1>
	<div class="container">
		<div id="carousel-example-generic" class="carousel slide"
			data-ride="carousel">
			<!-- 轮播标志小圆点 -->
			<ol class="carousel-indicators">
				<li data-target="#carousel-example-generic" data-slide-to="0"
					class="active"></li>
				<li data-target="#carousel-example-generic" data-slide-to="1"></li>
				<li data-target="#carousel-example-generic" data-slide-to="2"></li>
			</ol>

			<!-- 图片 -->
			<div class="carousel-inner" role="listbox">
				<div class="item active">
					<div class="col-md-4 col-xs-12 col-md-push-8">
						<a
							href="${pageContext.request.contextPath}/animationshow?id=${animdata.anim_id}">
							<img class="img-responsive"
							src="${pageContext.request.contextPath}/upload/${animdata.anim_j1_picurl}"
							alt="${animdata.anim_j1_name}">
						</a>
					</div>
					<div class="col-md-8 col-xs-12 col-md-pull-4">
						<h1 style="text-align: center;">${animdata.anim_j1_name}</h1>
						<p style="margin-top: 30px; text-align: center;">${animdata.anim_j1_jieshao}</p>
					</div>
				</div>

				<div class="item">
					<div class="col-md-4 col-xs-12 col-md-push-8">
						<a
							href="${pageContext.request.contextPath}/animationshow?id=${animdata.anim_id}">
							<img class="img-responsive"
							src="${pageContext.request.contextPath}/upload/${animdata.anim_j2_picurl}"
							alt="${animdata.anim_j2_name}">
						</a>
					</div>
					<div class="col-md-8 col-xs-12 col-md-pull-4">
						<h1 style="text-align: center;">${animdata.anim_j2_name}</h1>
						<p style="margin-top: 30px; text-align: center;">${animdata.anim_j2_jieshao}</p>
					</div>
				</div>

				<div class="item">
					<div class="col-md-4 col-xs-12 col-md-push-8">
						<a
							href="${pageContext.request.contextPath}/animationshow?id=${animdata.anim_id}">
							<img class="img-responsive"
							src="${pageContext.request.contextPath}/upload/${animdata.anim_j3_picurl}"
							alt="${animdata.anim_j2_name}">
						</a>
					</div>
					<div class="col-md-8 col-xs-12 col-md-pull-4">
						<h1 style="text-align: center;">${animdata.anim_j3_name}</h1>
						<p style="margin-top: 30px; text-align: center;">${animdata.anim_j3_jieshao}</p>
					</div>
				</div>
			</div>

			<!-- 左右按钮 -->
			<a class="left carousel-control" href="#carousel-example-generic"
				role="button" data-slide="prev"> <span
				class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">上一张</span>
			</a> <a class="right carousel-control" href="#carousel-example-generic"
				role="button" data-slide="next"> <span
				class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">下一张</span>
			</a>
		</div>
	</div>

	<h1 style="text-align: center; margin: 40px 0px;">漫圈动态</h1>
	<div class="container">
		<div class="row">
			<div class="list-group">
				<c:forEach var="item" begin="0" end="5" items="${newsdata}">
					<a
						href="${pageContext.request.contextPath}/newsshow?id=${item.news_id}"
						class="list-group-item">${item.news_name}</a>
				</c:forEach>
			</div>
		</div>
	</div>

	<!-- 页面尾部 -->
	<div class="footer container">
		<hr>
		<p class="text-center">2020-forever</p>
	</div>

</body>

<script>
    /* 以下将定义视频插件常用的几个控件 */
    // 实例化一个“下一个”按钮控件
    var nextControl = new Super.NextControl()
    // 实例化一个倍速控件
    var Dbspeen = new Super.DbspeenControl()
    // 实例化一个弹幕输入框控件
    var BarrageControl = new Super.BarrageControl()
    // 实例化一个全屏按钮控件
    var fullScreenControl = new Super.FullScreenControl()
    // 实例化视频播放资源
    var source = new Super.VideoSource({
        // type: 视频类型 mp4:可播放浏览器支持的常见格式的视频文件(mp4/ogg/webm) m3u8: 可播放Hls形式推流直播视频(***.m3u8) flv: 可播放flv视频
        // src: 视频路径，可以是本地路径亦可是网络路径
        type: 'mp4',
        src: '${pageContext.request.contextPath}/upload/${animdata.anim_vedio_url}'
    })

    /* 插件的常用配置参数 */
    var config = {
        // 是否自动播放（该功能受限于浏览器安全策略，可能会失效，解决思路为初始化时设置为静音，加载完毕后取消静音）
        autoplay: false,
        currentTime: 0, // 设置视频初始播放时间，单位为秒
        loop: false, // 是否循环播放
        muted: false, // 是否默认静音
        playbackRate: 1, // 视频默认播放速度
        poster: '', // 视频首帧图片路径
        volume: 0.5, // 视频默认音量 0-1
        showPictureInPicture: true, // 是否启用画中画模式按钮（>=Chrome10有效）
        source: source, // 为视频插件设置资源
        leftControls: [nextControl], // 在底部控件栏左侧插入 “下一个”按钮控件
        rightControls: [Dbspeen, fullScreenControl], // 在底部控件栏左侧插入 “倍速” 控件和 “全屏” 控件
        centerControls: [BarrageControl] // 在底部控件栏中间插入 “弹幕输入控件”
    }

    //初始化插件superVideo('videoContainer')请对应好html中的插件容器id.
    var video = new Super.Svideo('videoContainer', config)

    /* 以下是控件类常用的监听事件 */

    // 监听“下一个”按钮控件点击事件
    nextControl.addEventListener('click', function (event) {
        alert('click next menu !!!')
    })
    // 监听进入全屏模式后触发（点击进入全屏按钮）
    fullScreenControl.addEventListener('fullscreen', function (event) {
        console.log('is fullscreen !!!')
    })
    // 监听退出全屏模式后触发（点击退出全屏按钮）
    fullScreenControl.addEventListener('cancelfullscreen', function (event) {
        console.log('cancel fullscreen !!!')
    })
    // 监听发送弹幕输入框输入并发送弹幕后触发
    BarrageControl.addEventListener('send', function (event) {
        var value = event.target.option.value
        console.log('send ' + value)
    })

    /* 以下是video类常用的监听事件 */
    // 视频准备就绪
    video.addEventListener('ready', function () {
        console.log('is ready!')
    })
    // 开始播放
    video.addEventListener('play', function () {
        console.log('is play!')
    })
    // 暂停播放
    video.addEventListener('pause', function () {
        console.log('is pause!')
    })
    // 监听进入全屏模式后触发
    video.addEventListener('fullscreen', function (event) {
        console.log('is fullscreen !!!')
    })
    // 监听退出全屏模式后触发
    video.addEventListener('cancelfullscreen', function (event) {
        console.log('cancel fullscreen !!!')
    })

    /* 下面将演示弹幕类的用法 */
    video.addBarrage('冲鸭~~~~~~')
    video.addBarrage('奥里给！！！！！！')


</script>


</html>